<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="/WEB-INF/views/include/easyuifile.jsp" %>
<style type="text/css">

body {
	font-size:12px;
	background: url(../images/fantasy/huandibg.jpg) no-repeat;
}
#wrap {
	width:600px;
	margin:auto;
	position:relative;
}
#top {
	width:600px;
	height:120px;
}
#left {
	width:470px;
	height:120px;
	float:left;
}
#ads {
	width:470px;
	height:90px;
}
#ads img {
	width:95%;
	height:70px;
}
#tips {
	width:100%;
	height:30px;
	text-align:right;
	color:#039;
}
#right {
	width:120px;
	height:120px;
	float:left;
}

#mainleft {
	position:relative;
	width:400px;
	float:left;
	align:left;
	border-top:3px solid #143755;
	border-right:3px solid #143755;
}
#placetitle {
	height:20px;
	background-color:#72b653;
	padding:3px 5px;
	color:#ff0000;
	font-size:16px;
	font-weight:bold;
}
#placedesc {
	padding:5px;
	font-size:14px;
	line-height:1.5em;
}
#npc {
	height:100px;
	position:relative;
}
#npc .npcdiv {
	margin:0 10px;
	float:left;
}

#groundtitle {
	border-top:3px solid #143755;
	padding:3px 5px;
	background-color:#af865f;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	letter-spacing:5px; 
}
#ground {
	height:140px;
	margin:5px;
}
#ground table {
	width:100%;
	border-collapse:collapse;
	text-align:center;
}
#ground table td {
	border:2px solid #bbb;
	width:30px;
	height:30px;
}
#ground img {
	width:100%;
	border:0;
}

#mainright {
	width:197px;
	float:left;
}
#event {
	border-top:3px solid #143755;
}
#eventtitle {
	width:90%;
	padding:3px 5px;
	background-color:#0080ff;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	letter-spacing:5px; 
	float:right;
	text-align:center;
}
#eventitem {
	width:90%;
	height:100px;
	text-align:center;
	padding:10px 0;
	float:right;
}
#gohome {
	display:none;
}
#quickmove{
	width:100%;
	float:right;
	border-top:3px solid #143755;
}
#quickmovetitle{
	width:90%;
	padding:3px 5px;
	background-color:#0080ff;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	letter-spacing:5px; 
	float:right;
	text-align:center;
}
#quickmoves {
	width:90%;
	height:200px;
	text-align:center;
	padding:10px 0;
	float:right;
}
.divStyle
{
	text-align: left;
	font-size: 13px;
}   
.selectStyle
{
	height:95%;
	width:100%; 
}
.npcdiv {
	position: relative;
	cursor: pointer;
}
.npcdescdiv {
	width:140px;height:200px;border:#909090 1px solid;background:#ffd9ee;color:#333;
	word-wrap:break-word;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=5);/*ie*/
	-moz-box-shadow: 5px 5px 5px #909090;/*firefox*/
	-webkit-box-shadow: 5px 5px 5px #909090;/*safari或chrome*/
	box-shadow: 5px 5px 5px #909090;/*opera或ie9*/
	display:none;
	position: absolute;
	bottom: 20px;
	right: -150px;
	z-index: 99;
	cursor: auto;
}
#npctitle {
	width:100%;
	height:10%;
	font-size:12px;
	font-weight:bold;
	text-align:center;
	margin:10px 0 0 0;
}
#npcdesc {
	width:90%;
	height:40%;
	margin:0 auto;
}
#npcbutton {
	width:90%;
	height:45%;
	margin:auto;
}
#npcbutton div {
	cursor:pointer;
	border:#000 1px solid;
	text-align:center;
	background:#fff3c9;
}
#talkshow {
	background-color:#F0FBEB;
    border:1px solid #9BDF70;
    display:none;
    width:300px;
    height:200px;
    position:absolute;
    z-index:200;
    top:50%;margin-top:-100px;
    left:50%;margin-left:-150px;
}
#talkshow #talkshowclose {
	height:20px;
	width:100%;
	background-color:#099;
	text-align:right;
	line-height:16px;
}
#talkshow #talkshowclose a {
	font-size:16px;
	padding:0 10px;
	cursor: pointer;
}
#talkshow #talkshowdetail {
	margin:5px;
	font-size:14px;
	line-height:1.5em;
	word-wrap:break-word;
}

</style>
<script language="javascript">
	function gt() {
		var d = new Date();
		return(""+d.getYear()+d.getMonth()+d.getDay()+d.getHours()+d.getMinutes()+d.getSeconds()+d.getUTCMilliseconds());
	}
	var wh;
	function w(u,n,w,h,scrl){
		if (u.indexOf("?",0) == -1)
			u = u + "?time=";
		else
			u = u + "&time=";
		u = u + gt();
		wh = open(u,n,"width=" + w + ",height=" + h + ",stats=no,titlebar=no,location=no,toolbar=no,scrollbars=" + scrl + ",resizeable=no");
		wh.focus();
	}

	function init() {
		if ("${user.homePoint}" == "${cityMap.id}") {
			document.getElementById("gohome").style.display = "block";	
		}
	} 

	function pickitem(userid, mapid, itemid) {
		$.post("pickitem.action", {
			userid: userid,
			mapid: mapid,
			itemid: itemid
        },
        function(json) {
            var messages = json.message.split("#");
            if ("pickupok" == messages[0]) {
                alert("拾取成功！");
                $('#item_' + messages[1]).remove();
            } else if ("usernull" == messages[0]) {
                alert("用户非法！");
            } else if ("noitem" == messages[0]) {
                alert("道具不存在！");
                $('#item_' + messages[1]).remove();
            } else if ("fullitem" == messages[0]) {
                alert("背包已满，无法拾取道具！");
                //不用删除吧？
                //$('#item_' + messages[1]).remove();
            } else {
                alert(json.message);
            }
        });
		
	}
	function displaynpc(npcdesc) {
		npcdesc.style.display = "block";
	}
	function covernpc(npcdesc) {
		npcdesc.style.display = "none";
	}


	var inTable = false; 
	var inDiv = false; 

	var IsIE=!!document.all;
	//下面这个是对firefox进行扩展的
	if(!IsIE) {
		HTMLElement.prototype.contains=function(o){
		  while(o!=null){
		    if(o==this)return true;
		    o=o.parentNode;
		  }
		  return false;
		};
	}
	function showDiv(npcdesc) 
	{ 
	inTable = true; 
	npcdesc.style.display = "block";
	} 
	//当鼠标移动到目标div的子元素上时，会触发子元素的mouseoverDiv方法，设置inDiv = true，这样延迟后的判断条件就不成立，从而继续显示了。
	function hiddenDiv(npcdesc) 
	{
		inTable = false; 
		//setTimeout("hiddenDivTimeOut("+npcdesc+")",100);
		if(inTable == false && inDiv == false) {
			setTimeout(function() {
				if(inTable == false && inDiv == false) 
				{ 
					npcdesc.style.display = "none";
				} 
			}, 100);
		}
	} 
	//function hiddenDivTimeOut(npcdesc) 
	//{
	//	if(inTable == false && inDiv == false) 
	//	{ 
	//		npcdesc.style.display = "none";
	//	} 
	//}

	function mouseoverDiv() 
	{ 
		inDiv = true; 
	} 
	function mouseoutDiv(npcdesc,e) 
	{
		e=e||event;
		var obj=e.relatedTarget||e.toElement;
		if(npcdesc.contains(obj))return;
		inDiv = false; 
		if(inTable == false && inDiv == false) 
		{ 
			npcdesc.style.display = "none";
		}
	}
	function hiddenThis(npcdesc) {
		npcdesc.style.display = "none";
	}
	function talkshow(npcid) {
		document.getElementById("npcdesc_"+npcid).style.display = "none";
		document.getElementById("talkshow").style.display = "block";
		//document.getElementById("talkshowdetail").innerText = "sssaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
		$.post("talktoNpc2.action", {
			npcId: npcid
	    },
	    function(json) {
	        var messages = json.message;
	        document.getElementById("talkshowdetail").innerText = "  " + messages;
	    });
	}
	function hiddentalkshow() {
		document.getElementById("talkshow").style.display = "none";
	}
</script>
<title>【${cityMap.cityname }】${cityMap.placename }</title>
</head>
<body onload="init();">

<div id="wrap">
	<div id="top">
		<div id="left">
			<div id="ads">
				<img alt="" src="${ctxStatic}/images/fantasy/youle.gif">
			</div>
			<div id="tips">
				<script type="text/javascript" src="js/kouhao.js"></script>
			</div>
		</div>
		<div id="right" class="divStyle">
			
			<select id="userlist" name="userlist"  class="selectStyle" multiple="multiple">
				<c:if test="${userlist != null }">
					<c:forEach items="${userlist}" var="user">
						<option value='${user.userid }'>${user.name }</option>
					</c:forEach>
				</c:if>
			</select>
		</div>
	</div>
	<div id="mainleft">
		<div id="place">
			<div id="placetitle">
				【${cityMap.cityname }】${cityMap.placename }${cityMap.id }
			</div>
			<div id="placedesc">
				${cityMap.placedesc }
			</div>
		</div>
		<div id="npc">
			<div id="talkshow" onclick="hiddentalkshow();">
				<div id="talkshowclose">
					<a onclick="hiddentalkshow();">X</a>
				</div>
				<div id="talkshowdetail">
					
				</div>
			</div>
			
			<c:if test="${npclist != null }">
				<c:forEach items="${npclist}" var="npc">
					<div class="npcdiv" id="npc_${npc.id }" onmousedown="showDiv(npcdesc_${npc.id });" onmouseout="hiddenDiv(npcdesc_${npc.id });">
						<img alt="a${npc.name }" title="t${npc.name }" src="${ctxStatic}/images/fantasy/${npc.facesrc }">
					 	<div id="npcdesc_${npc.id }" class="npcdescdiv" onmouseover="mouseoverDiv()" onmouseout="mouseoutDiv(npcdesc_${npc.id },event);">
					 		<div id="npctitle">
					 			${npc.name }
					 		</div>
					 		<div id="npcdesc">
					 			${npc.desc }
					 		</div>
					 		<div id="npcbutton">
					 			<div id="talktonpc" onclick="talkshow('${npc.id }');">
					 				交谈
					 			</div>
					 			<div id="asktonpc" onclick="hiddenThis(npcdesc_${npc.id });alert('询问');">
					 				询问
					 			</div>
					 			<div id="applyfromnpc">
					 				接受任务
					 			</div>
					 			<div id="passtonpc">
					 				给道具
					 			</div>
					 			<div id="refusetask">
					 				推任务
					 			</div>
					 		</div>
					 	</div>
					</div>
				</c:forEach>
			</c:if>
		</div>
		<div id="groundtitle">
			地上的道具
		</div>
		<div id="ground">
			<table>
				<tr>
					<td colspan="10">
						点击地上的道具可以将它收入囊中哦！
					</td>
				</tr>
				<tr>
				<%
					for ( int i=0; i<30; i++) {
				%>
						<td>
							<c:if test="itemList != null && itemList[i] != null">
								<a id="item_<%=i %>" href="javascript:pickitem(${user.id }, ${cityMap.id }, <%=i %>);">
									<img alt="a${itemList[i].name}" title="t${itemList[i].name}"
									 src="${ctxStatic}/images/fantasy/${itemList[i].imgsrc}">
								</a>
							</c:if>
						</td>
				<%
						if (i % 10 == 9) {
				%>
					</tr>
					<tr>
				<%
						}
					}
				%>
				</tr>
			</table>
		</div>
	</div>
	<div id="mainright">
		<div id="event">
			<div id="eventtitle">
				特殊事件
			</div>
			<div id="eventitem">
				<div id="gohome">
					<a target="_parent" href="movetohome.action?fromid=${cityMap.id } %>"><font>回家</font></a>
				</div>
			</div>
		</div>
		<div id="quickmove">
			<div id="quickmovetitle">
				快速移动
			</div>
			<div id="quickmoves">
				<a target="_top" href="movetohome.action?fromid=${cityMap.id }"><font>回家</font></a>
			</div>
		</div>
	</div>
</div>
<script language="javascript">
	parent.northwest = "${cityMap.northwest }";
	parent.north = "${cityMap.north }";
	parent.northeast = "${cityMap.northeast }";
	parent.west = "${cityMap.west }";
	parent.east = "${cityMap.east }";
	parent.southwest = "${cityMap.southwest }";
	parent.south = "${cityMap.south }";
	parent.southeast = "${cityMap.southeast }";
	parent.cur = "${cityMap.id }";
	function initcompass() {
		if (parent.northwest != null && parent.northwest != "") {
			parent.document.getElementById("northwest").style.display = 'block';
		} else {
			parent.document.getElementById("northwest").style.display = 'none';
		}
		if (parent.north != null && parent.north != "") {
			parent.document.getElementById("north").style.display = 'block';
		} else {
			parent.document.getElementById("north").style.display = 'none';
		}
		if (parent.northeast != null && parent.northeast != "") {
			parent.document.getElementById("northeast").style.display = 'block';
		} else {
			parent.document.getElementById("northeast").style.display = 'none';
		}
		
		if (parent.west != null && parent.west != "") {
			parent.document.getElementById("west").style.display = 'block';
		} else {
			parent.document.getElementById("west").style.display = 'none';
		}
		if (parent.east != null && parent.east != "") {
			parent.document.getElementById("east").style.display = 'block';
		} else {
			parent.document.getElementById("east").style.display = 'none';
		}

		if (parent.southwest != null && parent.southwest != "") {
			parent.document.getElementById("southwest").style.display = 'block';
		} else {
			parent.document.getElementById("southwest").style.display = 'none';
		}
		if (parent.south != null && parent.south != "") {
			parent.document.getElementById("south").style.display = 'block';
		} else {
			parent.document.getElementById("south").style.display = 'none';
		}
		if (parent.southeast != null && parent.southeast != "") {
			parent.document.getElementById("southeast").style.display = 'block';
		} else {
			parent.document.getElementById("southeast").style.display = 'none';
		}
	}
	initcompass();
</script>
</body>
</html>